<template>
  <full-page>
    <v-container class="container" v-if="loading">
      <dv-loading style="color: #fff">loading...</dv-loading>
    </v-container>

    <v-container class="container" v-if="!loading">
      <div class="title">
        <div class="title-time">
          <svg-icon
            icon-class="time"
            style="font-size: 23px; color: #f10; margin-right: 5px"
          ></svg-icon>
          {{ time }}
        </div>
        <div class="title-name">好邻里惠民菜场 市场数据大屏</div>
        <div class="title-icon">
          <img src="../../assets/img/logo.jpg" alt="" />
        </div>
      </div>
      <div class="flexBody">
        <div class="left">
          <div class="box box-1">
            <echarts
              id="box-1-chart"
              :chartStyle="chartStyle"
              :option="option1"
            ></echarts>

            <div class="box-1-title">总额</div>
            <div class="box-1-explain">69682</div>
          </div>
          <div class="box box-2">
            <echarts
              id="box-2-chart"
              :chartStyle="chartStyle"
              :option="option2"
            ></echarts>
          </div>
          <div class="box box-3">
            <echarts
              id="box-3-chart"
              :chartStyle="chartStyle"
              :option="option3"
            ></echarts>
          </div>
        </div>
        <div class="center">
          <div class="box flex-1">
            <div class="box-left">
              <h4
                class="centerStyle"
                style="font-size: 20px; margin-bottom: 0; margin-top: 15px"
              >
                今日交易额
              </h4>
              <div
                class="centerStyle"
                style="font-size: 35px; font-weight: 600; margin: 6px 0"
              >
                <countTo :num="27461"></countTo>
              </div>
              <div class="flex-1">
                <div class="content-1">
                  昨日 <countTo :num="27461"></countTo>
                </div>
                <div class="content-1">
                  环比 <countTo :num="27.46"></countTo>%
                </div>
              </div>
              <div class="flex-1">
                <div class="margin-1">
                  <div>交易笔数</div>
                  <div class="margin-2">
                    <countTo :num="2125"></countTo>
                  </div>
                </div>
                <div class="margin-1">
                  <div>交易量</div>
                  <div class="margin-2">
                    <countTo :num="2125"></countTo>
                  </div>
                </div>
                <div class="margin-1">
                  <div>客单价</div>
                  <div class="margin-2">
                    <countTo :num="2125"></countTo>
                  </div>
                </div>
              </div>
              <div class="flex-2">
                <div class="content-2">
                  环比 <countTo :num="27461"></countTo>%
                </div>
                <div class="content-2">
                  环比 <countTo :num="27.46"></countTo>%
                </div>
                <div class="content-2">
                  环比 <countTo :num="27.46"></countTo>%
                </div>
              </div>
              <div class="flex-2">
                <div class="content-2">
                  昨日 <countTo :num="27461"></countTo>
                </div>
                <div class="content-2">
                  昨日 <countTo :num="27.46"></countTo>
                </div>
                <div class="content-2">
                  昨日 <countTo :num="27.46"></countTo>
                </div>
              </div>
            </div>
            <div class="box-right">
              <h4
                class="centerStyle"
                style="font-size: 20px; margin-bottom: 0; margin-top: 15px"
              >
                今日总客流
              </h4>
              <div
                class="centerStyle"
                style="font-size: 35px; font-weight: 600; margin: 6px 0"
              >
                <countTo :num="27461"></countTo>
              </div>
              <div class="flex-1">
                <div class="content-1">
                  昨日 <countTo :num="27461"></countTo>
                </div>
                <div class="content-1">
                  环比 <countTo :num="27.46"></countTo>%
                </div>
              </div>
              <div class="flex-1">
                <div class="margin-1">
                  <div>去重客流</div>
                  <div class="margin-2">
                    <countTo :num="2125"></countTo>
                  </div>
                </div>
                <div class="margin-1">
                  <div>新增客流</div>
                  <div class="margin-2">
                    <countTo :num="2125"></countTo>
                  </div>
                </div>
                <div class="margin-1">
                  <div>回头客客流</div>
                  <div class="margin-2">
                    <countTo :num="2125"></countTo>
                  </div>
                </div>
              </div>
              <div class="flex-2">
                <div class="content-2">
                  环比 <countTo :num="27461"></countTo>%
                </div>
                <div class="content-2">
                  环比 <countTo :num="27.46"></countTo>%
                </div>
                <div class="content-2">
                  环比 <countTo :num="27.46"></countTo>%
                </div>
              </div>
              <div class="flex-2">
                <div class="content-2">
                  昨日 <countTo :num="27461"></countTo>
                </div>
                <div class="content-2">
                  昨日 <countTo :num="27.46"></countTo>
                </div>
                <div class="content-2">
                  昨日 <countTo :num="27.46"></countTo>
                </div>
              </div>
            </div>
          </div>
          <div class="box box-7">
            <echarts
              id="box-7-chart"
              :chartStyle="chartStyle"
              :option="option7"
            ></echarts>
          </div>
          <div class="box flex-1">
            <div class="list-left">
              <h2 style="text-align: center; margin: 15px 0">实时交易</h2>
              <div class="li-title flex-1">
                <div class="list-name">品名</div>
                <div class="list-name">菜价</div>
              </div>
              <vue-seamless-scroll
                :data="list"
                :class-option="classOption"
                class="list-content"
              >
                <ul>
                  <li v-for="(item, index) in list" :key="index" class="flex-1">
                    <div class="list-name" v-text="item.name"></div>
                    <div class="list-name" v-text="item.price"></div>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
            <div class="list-right">
              <h2 style="text-align: center; margin: 15px 0">参考菜价</h2>
              <div class="li-title flex-1">
                <div class="list-name">品名</div>
                <div class="list-name">菜价</div>
              </div>
              <vue-seamless-scroll
                :data="list"
                :class-option="classOption"
                class="list-content"
              >
                <ul>
                  <li v-for="(item, index) in list" :key="index" class="flex-1">
                    <div class="list-name" v-text="item.name"></div>
                    <div class="list-name" v-text="item.price"></div>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="box box-4">
            <echarts
              id="box-4-chart"
              :chartStyle="chartStyle"
              :option="option4"
            ></echarts>
          </div>
          <div class="box box-5">
            <echarts
              id="box-5-chart"
              :chartStyle="chartStyle"
              :option="option5"
            ></echarts>
          </div>
          <div class="box box-6">
            <echarts
              id="box-6-chart"
              :chartStyle="chartStyle"
              :option="option6"
            ></echarts>
          </div>
        </div>
      </div>
    </v-container>
  </full-page>
</template>

<script>
import { formatDate } from "@/utils/methods";
import countTo from "@/components/countTo/countTo";
export default {
  components: {
    countTo,
  },
  data() {
    return {
      loading: true,
      chartStyle: {
        width: "100%",
        height: "100%",
      },
      chartStyle1: {
        width: "80%",
        height: "80%",
      },
      option: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      },
      option1: {
        title: {
          text: "今日品类销量占比",
          left: "center",
          top: "0",
          textStyle: { color: "#fff", fontSize: "25", fontWeight: "600" },
        },
        legend: {
          orient: "vertical",
          left: "75%",
          top: "25%",
          textStyle: { color: "#fff", fontSize: "16" },
          data: ["蔬菜", "猪肉", "禽类", "豆制品", "牛羊肉", "其他"],
        },
        series: [
          {
            width: "75%",
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "蔬菜", itemStyle: { color: "#3c9cfa" } },
              { value: 310, name: "猪肉", itemStyle: { color: "#40bfbf" } },
              { value: 234, name: "禽类", itemStyle: { color: "#4dbf6d" } },
              { value: 135, name: "豆制品", itemStyle: { color: "#f7ce59" } },
              { value: 1548, name: "牛羊肉", itemStyle: { color: "#8048d4" } },
              { value: 1548, name: "其他", itemStyle: { color: "#e3ff43" } },
            ],
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            // emphasis: {
            //     label: {
            //         show: true,
            //         fontSize: '30',
            //         fontWeight: 'bold'
            //     }
            // },
          },
        ],
      },
      option2: {
         color:["#00bffb","#ffc746","#ff5327","#8421c9"],
        title: {
          text: "月交易峰值分析",
          left: "center",
          top: "0",
          textStyle: { color: "#fff", fontSize: "25", fontWeight: "600" },
        },
        legend: {
          orient: "vertical",
          left: "75%",
          top: "35%",
          textStyle: { color: "#fff", fontSize: "16" },
          data: ["上午", "中午", "下午", "晚上"],
        },
        series: [
          {
            width: "75%",
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "上午"},
              { value: 310, name: "中午"},
              { value: 234, name: "下午"},
              { value: 135, name: "晚上"},
            ],
            type: "pie",
            // radius: ["50%", "70%"],
            radius: "70%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            // emphasis: {
            //     label: {
            //         show: true,
            //         fontSize: '30',
            //         fontWeight: 'bold'
            //     }
            // },
          },
        ],
      },
      option3: {
        tooltip: {
          trigger: "axis",
        },
        title: {
          text: "七天交易额交易量趋势",
          left: "center",
          top: "0",
          textStyle: { color: "#fff", fontSize: "25", fontWeight: "600" },
        },
        legend: {
          data: ["交易量", "交易额"],
          top: "12%",
          textStyle: { color: "#fff", fontSize: "16" },
        },
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          bottom: "10",
          top: "30%",
          containLabel: true,
          // show:false
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5", "6", "7"],
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: [
          {
            name: "千克",
            type: "value",
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          {
            name: "元",
            type: "value",
            min: 0,
            max: 600,
            interval: 100,
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
          },
        ],
        series: [
          {
            name: "交易量",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
            areaStyle: {},
            itemStyle: {
              color: "#6A5ACD",
              // normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#087084", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              // },
            },
          },
          {
            name: "交易额",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
            areaStyle: {},
            itemStyle: {
              color: "#6A5ACD",
              // normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#6412ce", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#2f6dc6", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              // },
            },
          },
        ],
      },
      option4: {
        title: {
          text: "入口热力图",
          left: "center",
          top: "0",
          textStyle: { color: "#fff", fontSize: "25", fontWeight: "600" },
        },
        legend: {
          orient: "vertical",
          left: "75%",
          top: "35%",
          textStyle: { color: "#fff", fontSize: "16" },
          data: ["上午", "中午", "下午", "晚上"],
        },
        series: [
          {
            width: "75%",
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "上午", itemStyle: { color: "#3c9cfa" } },
              { value: 310, name: "中午", itemStyle: { color: "#40bfbf" } },
              { value: 234, name: "下午", itemStyle: { color: "#4dbf6d" } },
              { value: 135, name: "晚上", itemStyle: { color: "#f7ce59" } },
            ],
            type: "pie",
            // radius: ["50%", "70%"],
            radius: "70%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      },
      option5: {
        color:["#00bffb","#ffc746","#ff5327","#8421c9"],
        title: {
          text: "客流漏斗",

          left: "center",
          top: "0",
          textStyle: { color: "#fff", fontSize: "25", fontWeight: "600" },
        },

        legend: {
          data: ["展现", "点击", "访问", "咨询"],
          top: "12%",
          textStyle: { color: "#fff", fontSize: "16" },
        },
        grid: {
          top: "40%",
          containLabel: true,
        },
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "10%",
            top: 80,
            //x2: 80,
            bottom: 60,
            width: "80%",
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 0,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              { value: 60, name: "访问" },
              { value: 40, name: "咨询" },
              { value: 80, name: "点击" },
              { value: 100, name: "展现" },
            ],
          },
        ],
      },
      option6: {
        color: ["#6e8af1", "#b7e555"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: "七天客流数据",
          left: "center",
          top: "0",
          textStyle: { color: "#fff", fontSize: "25", fontWeight: "600" },
        },
        legend: {
          data: ["男", "女"],
          top: "12%",
          textStyle: { color: "#fff", fontSize: "16" },
        },
        grid: {
          bottom: 10,
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          data: ["1", "2", "3", "4", "5", "6", "7"],
          splitLine: { show: false },
          type: "category",
        },
        yAxis: {
          type: "value",

          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            name: "男",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight",
            },
            barWidth: 15,
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "女",
            type: "bar",
            stack: "总量",
            barWidth: 15,
            label: {
              show: false,
              position: "insideRight",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      },
      option7: {
        color: ["#00ffde", "#b9e657", "#03bcc6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        title: {
          text: "今日分时交易数据",
          left: "left",
          top: "0",
          textStyle: { color: "#fff", fontSize: "25", fontWeight: "600" },
        },
        legend: {
          data: ["蒸发量", "降水量", "平均温度"],
          top: "12%",
          textStyle: { color: "#fff", fontSize: "14" },
        },
        xAxis: [
          {
            boundaryGap: [2, 2],
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "水量",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml",
            },
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          {
            type: "value",
            name: "温度",
            min: 0,
            max: 25,
            interval: 5,

            axisLabel: {
              formatter: "{value} °C",
            },
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
          },
        ],
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          top: "20%",
          containLabel: true,
          // show:false
        },
        series: [
          {
            name: "蒸发量",
            type: "bar",
            barWidth: 15,
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
          },
          {
            name: "降水量",
            type: "bar",
            barWidth: 15,
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3,
            ],
          },
          {
            name: "平均温度",
            type: "line",
            smooth: 0.3,
            areaStyle: {},
            yAxisIndex: 1,
            lineStyle: {
              color: "#6A5ACD",
              width:3,
              // normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#03bcc6", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              // },
            },
            areaStyle:{
              color:"#0c3c5d"
            },
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
            ],
          },
        ],
      },

      time: "",
      list: [
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
        { name: "白菜", price: "1.41元/kg" },
      ],
    };
  },
  mounted() {
    this.twotime = setInterval(this.tim, 1000);
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    // console.log(logo);
  },
  computed: {
    classOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        //  openRoll:false,
        // fheight:300,
      };
    },
  },
  beforeCreate() {
    clearInterval(this.twotime);
  },
  methods: {
    tim() {
      this.time = formatDate();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #0e2c44;
}
.flexBody {
  width: 100%;
  display: flex;
  height: calc(100% - 63px);
}
.left {
  // float: left;
  // height: calc(100% - 63px);
  width: 445px;
}
.right {
  // float: right;
  // height: calc(100% - 63px);
  width: 445px;
}
.center {
  // float: left;
  // margin-left: 445px;
  flex: 1;
  // background: chartreuse;
}
.list-left,
.list-right {
  //  width: 100%;
  width: 48%;
  height: 100%;
}
.list-content {
  width: 100%;
  height: calc(100% - 97px);
  line-height: 32px;
  overflow: hidden;
  background: #002135;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.li-title {
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  font-size: 16px;
  background: -webkit-linear-gradient(left, #0099e9, #078394);
}
.list-name {
  flex: 1;
  text-align: center;
}
.box {
  width: 100%;
  height: 33.3%;
  position: relative;
}
.flex-1 {
  display: flex;
  color: #fff;
  justify-content: space-around;
}
.flex-2 {
  display: flex;
  color: #fff;
  justify-content: space-between;
}
.centerStyle {
  text-align: center;
  padding: 0;
  margin: 10px;
}
.content-1 {
  // font-weight: 500;
  margin: 15px 0;
}
.content-2 {
  // background: rgb(90, 5, 201);
  text-align: left;
  // font-weight: 500;
  margin: 0;
  margin-top: 10px;
  margin-bottom: 5px;
  // flex: 1;
  width: 25%;
  padding-left: 3%;
}
.margin-1 {
  margin: 23px 0 20px;
  flex: 1;
  text-align: center;
  // font-weight: 500;
}
.margin-2 {
  margin: 15px 0 0px;
  font-size: 25px;
}
.content-center {
  text-align: center;
}
.content-right {
  text-align: right;
  margin-left: 0px;
  margin-right: 10px;
}
.box-left,
.box-right {
  width: 48%;
  height: calc(100% - 20px);
  border:1px solid#00bbe7;
  font-family: "PingFangSC-Regular";
  font-weight: 600;
}
.title {
  width: 100%;
  display: flex;
  color: #fff;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.title > div {
  flex: 1;
}
.title-time {
  font-size: 23px;
}
.title-name {
  font-size: 35px;
  font-weight: 500;
  text-align: center;
}
.title-icon {
  text-align: right;
}
.box-1-title,
.box-1-explain,
.box-1-BigTit {
  width: 50px;
  position: absolute;
  color: #fff;
  font-size: 22px;
  left: 32%;
  top: 38%;
  text-align: center;
  font-weight: 500;
}
.box-1-explain {
  left: 29.5%;
  top: 52%;
  font-size: 25px;
  font-weight: 600;
}
.box-1-BigTit {
  width: 100%;
  left: 0;
  top: 10%;
  font-size: 25px;
}
</style>